<template>
  <list-container @resize="resize" :isContent="false">
    <div class="ok" :style="{ height: tableHeight + 'px' }">
      <Row type="flex" :gutter="48">
        <Col span="10">
          <Card dis-hover :bordered="false">
            <div slot="title">
              <Button
                class="ivu-btn-ghost"
                type="primary"
                style="margin-right: 5px"
                @click="handleSearch"
              >
                <Icon type="ios-refresh" />
                Refresh
              </Button>
            </div>
            <Tree
              :data="treeData"
              :render="renderContent"
              empty-text="no data"
              class="tree-render"
              @on-select-change="onSelectChangeTree"
            ></Tree>
          </Card>
        </Col>
        <Col span="14">
          <Card dis-hover :bordered="false">
            <div slot="title">
              <Avatar
                icon="md-apps"
                size="small"
                style="background-color: rgb(230, 247, 255);color:rgb(24, 144, 255)"
              />
              Edit Menu
              <span v-if="selectedDataArray.length !== 0"
                >：{{ selectedNodeData.label }}</span
              >
            </div>
            <Alert v-if="selectedDataArray.length === 0"
              >Select the menu to edit from the left</Alert
            >
            <template v-else>
              <Form
                :model="selectedNodeData"
                :rules="menuRule"
                ref="editForm"
                :label-width="180"
              >
                <FormItem label="Menu Name" prop="label">
                  <Input
                    placeholder="Menu Name"
                    v-model="selectedNodeData.menuName"
                  />
                </FormItem>
                <FormItem label="Menu URL" prop="menuUrl">
                  <Input
                    placeholder="Menu Name"
                    v-model="selectedNodeData.menuUrl"
                  />
                </FormItem>
                <FormItem label="Menu Description" prop="menuDescription">
                  <Input
                    placeholder="Menu Description"
                    v-model="selectedNodeData.menuDescription"
                  />
                </FormItem>
                <FormItem label="Menu Sort" prop="menuSort">
                  <Input
                    placeholder="Menu Sort"
                    v-model="selectedNodeData.menuSort"
                  />
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="handeUpdate">Update</Button>
                </FormItem>
              </Form>
            </template>
          </Card>
        </Col>
      </Row>
      <Modal v-model="addModal" title="Add Menu">
        <Form
          :model="addFormItems"
          :rules="addRule"
          ref="addFormItems"
          :label-width="180"
        >
          <FormItem label="Menu Name" prop="menuName">
            <Input placeholder="Menu Name" v-model="addFormItems.menuName" />
          </FormItem>
          <FormItem label="Menu URL" prop="menuUrl">
            <Input placeholder="Menu Name" v-model="addFormItems.menuUrl" />
          </FormItem>
          <FormItem label="Menu Description" prop="menuDescription">
            <Input
              placeholder="Menu Description"
              v-model="addFormItems.menuDescription"
            />
          </FormItem>
          <FormItem label="Menu Sort" prop="menuSort">
            <Input placeholder="Menu Sort" v-model="addFormItems.menuSort" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="addModal = false"> Cancel</Button>
          <Button type="primary" :loading="modal_loading" @click="handeSave"
            >Save</Button
          >
        </div>
      </Modal>
    </div>
  </list-container>
</template>
<script>
/**
 * 消息列表管理
 */
import { InitListPage } from "@m/ListMixins";
import { list, update, add, delMenu } from "@/api/permissions.js";
export default {
  mixins: [InitListPage],

  data() {
    return {
      treeData: [],
      selectedDataArray: [],
      //编辑
      selectedNodeData: {},
      //新增
      addFormItems: {
        parentId: 0,
        menuDescription: "",
        menuLevel: 0,
        menuName: "",
        menuSort: 1,
        menuUrl: ""
      },
      editLoading: false,
      modal_loading: false,
      addModal: false,
      menuRule: {
        menuName: [{ required: true, message: "required", trigger: "blur" }],
        menuUrl: [{ required: true, message: "required", trigger: "blur" }],
        menuDescription: [
          { required: true, message: "required", trigger: "blur" }
        ]
      },
      addRule: {
        menuName: [{ required: true, message: "required", trigger: "blur" }],
        menuUrl: [{ required: true, message: "required", trigger: "blur" }],
        menuDescription: [
          { required: true, message: "required", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.treeData = [];
      list().then(({ data }) => {
        this.treeData.push(data);
      });
    },
    /**
     * 选中节点信息
     */
    onSelectChangeTree(arry, items) {
      this.selectedNodeData = items;
      this.selectedDataArray = arry;
      this.selectedNodeData.menuDescription = items.labelDescription;
      this.selectedNodeData.menuName = items.label;
      this.selectedNodeData.menuSort = items.sort;
    },
    /**
     * 更新菜单
     */
    handeUpdate() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.editLoading = true;
          update(this.selectedNodeData)
            .then(() => {
              this.handleSearch();
              this.$Message.success("Succcess Update");
            })
            .catch(message => {
              this.$Message.success(message);
            })
            .finally(() => {
              this.editLoading = false;
            });
        }
      });
    },
    /**
     * 保存菜单
     */
    handeSave() {
      this.$refs.addFormItems.validate(valid => {
        if (valid) {
          this.modal_loading = true;
          add(this.addFormItems)
            .then(() => {
              this.$Message.success("Add Menu Success");
              this.handleSearch();
              this.addModal = false;
              this.$refs.addFormItems.resetFields();
            })
            .finally(() => {
              this.modal_loading = false;
            });
        }
      });
    },
    handleDel(data) {
      this.$Modal.confirm({
        title: "Tips",
        content: "Whether to confirm deletion?",
        loading: true,
        okText: "confirm",
        cancelText: "cancel",
        onOk: () => {
          delMenu(data.id)
            .then(() => {
              this.handleSearch();
            })
            .finally(() => {
              this.$Modal.remove();
            });
        }
      });
    },
    showAddModal(data) {
      this.addFormItems.parentId = data.id;
      this.addFormItems.menuLevel = data.menuLevel + 1;
      this.addModal = true;
    },
    renderContent(h, { data }) {
      let arr = [];

      if (data.menuLevel === 0) {
        arr.push(
          h("Button", {
            props: Object.assign({}, this.buttonProps, {
              icon: "ios-add",
              size: "small"
            }),
            style: {
              marginRight: "8px"
            },
            on: {
              click: () => {
                this.showAddModal(data);
              }
            }
          })
        );
      }
      if (data.menuLevel === 1) {
        arr.push(
          h("Button", {
            props: Object.assign({}, this.buttonProps, {
              icon: "ios-add",
              size: "small"
            }),
            style: {
              marginRight: "8px"
            },
            on: {
              click: () => {
                this.showAddModal(data);
              }
            }
          })
        );
      }
      if (data.menuLevel === 1 && data.children.length === 0) {
        arr.push(
          h("Button", {
            props: Object.assign({}, this.buttonProps, {
              icon: "ios-remove",
              size: "small"
            }),
            on: {
              click: () => {
                this.handleDel(data);
              }
            }
          })
        );
      }
      if (data.menuLevel === 2) {
        arr.push(
          h("Button", {
            props: Object.assign({}, this.buttonProps, {
              icon: "ios-remove",
              size: "small"
            }),
            on: {
              click: () => {
                this.handleDel(data);
              }
            }
          })
        );
      }
      return h(
        "div",
        {
          style: { display: "flex", "justify-content": "space-between" }
        },
        [h("span", data.label), h("span", arr)]
      );
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .tree-render .ivu-tree-title {
  width: 100%;
}
/deep/.ivu-tree ul li {
}
</style>
